<%@ include file="/WEB-INF/jspf/taglib.jspf" %>
<%-- Set language based on user's choice --%>
<c:if test="${!empty language}">
    <fmt:setLocale value="${language}" scope="session" />
</c:if>
<link rel="stylesheet" type="text/css" href="css/jimgMenu.css" />
 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!--<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>-->
<script type="text/javascript">
    $(document).ready(function () {

        // find the elements to be eased and hook the hover event
        $('div.jimgMenu ul li a').hover(function() {

            // if the element is currently being animated (to a easeOut)...
            if ($(this).is(':animated')) {
                $(this).stop().animate({width: "400px"}, {duration: 400, easing:"easeOutQuad"});
            } else {
                // ease in quickly
                $(this).stop().animate({width: "400px"}, {duration: 400, easing:"easeOutQuad"});
            }
        }, function () {
            // on hovering out, ease the element out
            if ($(this).is(':animated')) {
                $(this).stop().animate({width: "120px"}, {duration: 400, easing:"easeInOutQuad"})
            } else {
                // ease out slowly
                $(this).stop('animated:').animate({width: "120px"}, {duration: 450, easing:"easeInOutQuad"});
            }
        });
    });
</script>
<div class="jimgMenu">
    <ul>
        <li class="landscapes"><a href="javascript:ContentAjaxRequest('SRV/SearchService', 'section #container')">Service</a></li>
        <li class="people"><a href="javascript:ContentAjaxRequest('Public/Hospital', 'section #container')">Hospital</a></li>
        <li class="nature"><a href="javascript:ContentAjaxRequest('Public/Doctor', 'section #container')">Doctor</a></li>
        <li class="abstract"><a href="#nogo">Abstract</a></li>
        <li class="urban"><a href="#nogo">Urban</a></li>
    </ul>
</div>
<div class="content-box">
    <div class="container_16 wrapper">
        <div class="grid_6">
            <div class="box">
                <div class="indent-box">
                    <span class="txt"><fmt:message key="Welcome"/></span>
                   <br>
                   <p align="justify" style="text-indent: 0.3in"> <fmt:message key="introText1"/><br></p>
                   <p align="justify" style="text-indent: 0.3in"> <fmt:message key="introText2"/></p><br>
                    <a href="#" class="button1">Read More </a>  </div>
            </div>
        </div>
        <div class="grid_6">
            <div class="indent-col">
               
               <span class="txt"><fmt:message key="Newsevents"/></span><br>
               <img src="images/mario_blood.jpg" width="250" height="126" alt="mario_blood"/>
                <span class="txt1"><br><fmt:message key="titlenew"/></span>
                <p><br><fmt:message key="detailnew"/><br></p>
                <a class ="button1">More news</a>
               </div>
        </div>
        <div class="grid_4">
            <div class="box1">
                <div class="indent-box">
       <span class="txt"><fmt:message key="Survey"/></span>
       <img src="images/poll.gif" width="163" height="284" alt="poll"/><br><br>
                 266 Responses   |   View Poll
                </div>
            </div>
        </div>
    </div>
</div>
